import React, { useEffect, useState } from 'react';
import { Button , Table ,Tag ,notification,Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api';
import _ from 'lodash'//lodash是一个常用工具函数集合库
import './command.scss'

interface Props {}

interface DataType {
    key: string;
    img1:string
    issale:number
    isrecommend:number
    isseckill:number 
    proid : string
    }

function Command(props:Props) {

    
    var [pagination,setPagination] = useState({current:0,pageSize:0})
    var [prolist,setProlist] = useState([])

    // 请求产品数据
    var request_pro_list = async () =>{
        var res = await service.pro.pro_showdata({type:'isrecommend',flag:1})
        console.log(res.data);
        if(res.data.code == 200) {
            setProlist(res.data.data)
        }
    }

    useEffect(()=>{
        request_pro_list()
    },[])

    // 分页时执行
    var onPageChange =( pagination:any)=>{ 
        setPagination(pagination)
    }

    // 更新flag状态
    var handleChange = async (checked:any,proid:any,type:any)=>{
        var res = await service.pro.pro_updateFlag({proid,flag:checked,type})    
        notification.destroy()
        if(res.data.code == 200) {
            notification.success({message:'更新flag成功'}) 
            // 查找产品，更改产品的状态
            var item:any = prolist.find((item:any)=>item.proid==proid)
            if(item){
                item[type] = 1- item[type]
            }
            // 让组件更新
            var newprolist = _.cloneDeep(prolist)
            setProlist(newprolist)
        }
    }


    // 表格列的配置项 
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            align: 'center',
            key: 'name',
            render: (_,record,index) => <div>{ (pagination.current-1) * pagination.pageSize +  index+1 }</div>
        },
        {
            title: '图片 ',
            align: 'center',
            width:120,
            key: '2',
            render: (_,record,index) => <img src={record.img1} />
        },
        {
            title: '名称',
            align: 'center',
            width:300,
            key: '3',
            dataIndex:'proname'
        },
        {
            title: '品牌 ',
            align: 'center',
            key: '4',
            dataIndex:'brand'
        },
        {
            title: '分类',
            align: 'center',
            key: '5',
            dataIndex:'category'
        },
        {  
            title: '原价',
            align: 'center',
            key: '6',
            dataIndex:'originprice'
        },
        {
            title: '折扣',
            align: 'center',
            key: '7',
            dataIndex:'discount'
        },
        {
            title: '销量',
            align: 'center',
            key: '8',
            dataIndex:'sales'
        },
        {
            title: '是否推荐',
            align: 'center',
            key: '9',
            render: (_,record,index) => <Switch checked={record.isrecommend == 1}  onChange={(checked)=>{  handleChange(checked,record.proid,'isrecommend')}} />,
        },
        {
            title: '操作',
            align: 'center',
            key: '10',
            render: (_,record,index) => <Button type="primary" danger >Delete</Button>
        },
    ]

    return (
        <div className='command'>
            <Table onChange={onPageChange} className='table' columns={columns}  dataSource={prolist}/>
        </div>
    );
}

export default Command;